<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          min-height: 300px;
          background-color: orange;
          color: #fff;
          font-size: 30px;
        }
  
        .v-enter,
        .v-leave-to {
          opacity: 0;
        }
  
        .v-enter-active,
        .v-leave-active {
          transition: all 1s;
        }
        .v-enter-to,
        .v-leave {
          opacity: 1;
        }
      </style>
</head>

<body>
    <!-- vue-router的基本使用 -->
    <div id="app">
      <!-- vue-router 提供了2个组件 router-view / router-link -->

      <!-- router-link会被渲染成a标签 to属性决定路由的跳转地址 -->
      <router-link to="/tech">科技</router-link>
      <router-link to="/game">游戏</router-link>
      <router-link to="/money">财经</router-link>


      <!-- router-view 占位符 （本质上就是一个动态组件） -->
      <router-view></router-view>
    </div>
    <!-- vue引入 -->
    <script src="./vue.min.js"></script>
    <!-- 引入vue router -->
    <script src="./vue-router.min.js"></script>
    <script>
     const randomComponent = (name, title) => ({
        name,
        template: `<div class="box" :style="{backgroundColor: color}">
            <p>{{title}}</p> 
          </div>`,
        data() {
          const getRandomColor = () =>
            `rgb(${~~(Math.random() * 255)}, ${~~(Math.random() * 255)}, ${~~(
              Math.random() * 255
            )})`;
          return {
            name,
            title,
            color: getRandomColor(),
          };
        },
      });

    //   1. 写好路由表 数组的形式
    const routes = [
    {
      path: '/',
      redirect: '/tech'
    },  
    {
        path: '/tech',
        component: randomComponent('TechCom', '科技板块'),
        name: 'tech'
    }, {
        path: '/game',
        component: randomComponent('GameCom', '游戏板块'),
        name: 'game'
    },{
        path: '/money',
        component: randomComponent('MoneyCom', '财经板块'),
        name: 'money',
        alias: '/rich'
    }]

    //  2. 生成对应的vue-router的实例
    const router = new VueRouter({
        // mode: 'history',   // 默认是hash模式
        routes
    })

    // 3. 创建Vue的根组件实例，把router实例进行注入, 所有的后代组件实例都可以访问的router， vm.$router
    const vm = new Vue({
        el:'#app',
        router
    })
    </script>
</body>

</html>